<script setup lang="ts">
import { useElementSize } from '@vueuse/core';
import {
    AxesHelper, Box3, Group, PerspectiveCamera,
    Scene, Vector3, WebGLRenderer,
    Raycaster,
    Vector2,
    Line,
    BufferGeometry,
    LineBasicMaterial,
    Sprite,
    SpriteMaterial,
    CircleGeometry,
    Mesh,
    SphereGeometry,
    MeshBasicMaterial
} from 'three';
import { RandomObjs } from '../models'
import { onBeforeUnmount } from 'vue';
import { unref } from 'vue';
import { watch } from 'vue';
import { reactive } from 'vue';
import { onMounted, ref } from 'vue';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
const viewEleRef = ref<HTMLElement>()
const containerSizeInfo = reactive(useElementSize(viewEleRef)), renderer = new WebGLRenderer(), scene = new Scene(), perspectiveCamera = new PerspectiveCamera(), axesHelper = new AxesHelper(100)
watch(containerSizeInfo, (v) => {
    renderer.setSize(v.width, v.height)
    perspectiveCamera.aspect = v.width / v.height
    perspectiveCamera.updateProjectionMatrix()
})
perspectiveCamera.position.set(200, 200, 200)
const group = new Group()
group.add(...RandomObjs)
const box = new Box3()
box.setFromObject(group)
const center = new Vector3()
box.getCenter(center)
perspectiveCamera.lookAt(center)
scene.add(group)
scene.add(axesHelper)
const currentPointer = new Vector2()
const raycaster = new Raycaster()
function render() {
    renderer.render(scene, perspectiveCamera)
    raycaster.setFromCamera(currentPointer, perspectiveCamera);
    requestAnimationFrame(render)
}
const pointers = reactive<Array<Vector3>>([])
const lineMaterial = new LineBasicMaterial({
    color: 0xff0000,
    linewidth: 2,
    depthTest: false
})
let tempLine: Line = new Line(new BufferGeometry(), lineMaterial)
function createSprite() {
    const spritemateril = new MeshBasicMaterial({
        color: 0xff0000,
        depthTest: false
    })
    const geometry = new SphereGeometry(4, 5, 5)
    const sphere = new Mesh(geometry, spritemateril)

    return sphere

}
onMounted(() => {
    unref(viewEleRef)!.appendChild(renderer.domElement);
    const orbitController = new OrbitControls(perspectiveCamera, renderer.domElement);
    orbitController.listenToKeyEvents(window)
    renderer.domElement.addEventListener('pointermove', e => {
        currentPointer.x = (e.offsetX / containerSizeInfo.width) * 2 - 1;
        currentPointer.y = - (e.offsetY / containerSizeInfo.height) * 2 + 1;
        const result = raycaster.intersectObjects(group.children, true)
        const target = result.at(0)
        if (target && pointers.length < 2) {

        }
    })
    renderer.domElement.addEventListener('pointerdown', e => {
        console.log(e);
    })
    renderer.domElement.addEventListener('pointerup', e => {
        const result = raycaster.intersectObjects(group.children)
        const target = result.at(0)
        if (!target) {
            return
        }


        pointers.push(target.point)
        tempLine.geometry.setFromPoints(pointers)
        if (pointers.length > 1) {
            pointers.length = 0
            tempLine = new Line(new BufferGeometry(), lineMaterial)
        } else {
            scene.add(tempLine)
            const pointer = createSprite()
            // pointer.position.copy(target.point)
            // scene.add(pointer)
        }



    })
    renderer.domElement.addEventListener('pointerleave', e => {
        console.log(e);
    })
    render()
})
onBeforeUnmount(() => {
    renderer.dispose()
})
</script>
<template>
    <main ref="viewEleRef">

    </main>
</template>